<template>
  <el-form-item label="订单原来的运输方式：">
    <el-button type="primary" @click="() => (visibleShippingMethods = true)">添加</el-button>
  </el-form-item>
  <el-form-item>
    <div class="country-box">
      <div class="item" v-for="item in formData.original_shipping_method" :key="item.id">
        <span>{{ item.label }}</span>
        <svg-icon icon-class="del" @click="clearOriginalShippingMethod(item.id, 'original_shipping_method')" />
      </div>
    </div>
    <div class="labelButton" v-if="formData.original_shipping_method.length" style="left: 510px">
      <el-link @click="clearOriginalShippingMethod(null, 'original_shipping_method')" type="danger" class="ml-2" :underline="false">清除</el-link>
    </div>
  </el-form-item>

  <el-form-item label="订单原来的发货仓库：">
    <el-button type="primary" @click="() => (visibleWarehouseInfo = true)">添加</el-button>
  </el-form-item>
  <el-form-item>
    <div class="country-box">
      <div class="item" v-for="item in formData.original_shipping_warehouse" :key="item.id">
        <span>{{ item.label }}</span>
        <svg-icon icon-class="del" @click="clearOriginalShippingMethod(item.id, 'original_shipping_warehouse')" />
      </div>
    </div>
    <div class="labelButton" style="left: 510px">
      <el-link type="danger" v-if="formData.original_shipping_warehouse.length" class="ml-2" :underline="false" @click="clearOriginalShippingMethod(null, 'original_shipping_warehouse')">
        清除
      </el-link>
    </div>
  </el-form-item>

  <el-form-item label="平台客户选择的运输方式（包含）：">
    <el-button type="primary" @click="handleShippingMethodDialog">添加</el-button>
  </el-form-item>
  <el-form-item>
    <div class="country-box">
      <div class="item" v-for="item in formData.customer_shipping_method" :key="item.id">
        <span class="max-w-[270px]">
          <VText :value="item.label" :line="1" />
        </span>
        <svg-icon icon-class="del" @click="clearOriginalShippingMethod(item.id, 'customer_shipping_method')" />
      </div>
    </div>
    <div class="labelButton" v-if="formData.customer_shipping_method" style="left: 510px">
      <el-link @click="clearOriginalShippingMethod(null, 'customer_shipping_method')" type="danger" class="ml-2" :underline="false"> 清除 </el-link>
    </div>
  </el-form-item>

  <el-form-item label="平台客户选择的运输方式（不包含）：">
    <el-button type="primary" @click="handleShippingMethodExcludeDialog">添加</el-button>
  </el-form-item>
  <el-form-item>
    <div class="country-box">
      <div class="item" v-for="item in formData.customer_shipping_method_exclude" :key="item.id">
        <span class="max-w-[270px]">
          <VText :value="item.label" :line="1" />
        </span>
        <svg-icon icon-class="del" @click="clearOriginalShippingMethod(item.id, 'customer_shipping_method_exclude')" />
      </div>
    </div>
    <div class="labelButton" v-if="formData.customer_shipping_method_exclude" style="left: 510px">
      <el-link @click="clearOriginalShippingMethod(null, 'customer_shipping_method_exclude')" type="danger" class="ml-2" :underline="false"> 清除 </el-link>
    </div>
  </el-form-item>

  <CusShippingMethods
    multiple
    :selectIds="formData.customer_shipping_method.map((v) => v.id)"
    :originOption="originOption"
    @submit="(dtd) => handleDialogData(dtd, 'customer_shipping_method')"
    v-model:visible="visibleCusShippingMethods"
  />
  <CusShippingMethods
    multiple
    :selectIds="formData.customer_shipping_method_exclude?.map((v) => v.id)"
    :originOption="originOption"
    @submit="(dtd) => handleDialogData(dtd, 'customer_shipping_method_exclude')"
    v-model:visible="visibleCusShippingMethodsExclude"
  />

  <ShippingMethods @submit="(dtd) => handleDialogData(dtd, 'original_shipping_method')" :selectIds="formData.original_shipping_method.map((v) => v.id)" v-model:visible="visibleShippingMethods" />
  <WarehouseInfo @submit="(dtd) => handleDialogData(dtd, 'original_shipping_warehouse')" :selectIds="formData.original_shipping_warehouse.map((v) => v.id)" v-model:visible="visibleWarehouseInfo" />
</template>

<script setup>
import { getWarehouseOptions, tmsOverallOptions } from "@/api/public"
import CusShippingMethods from "./components/CusShippingMethods"
import ShippingMethods from "./components/ShippingMethods"
import WarehouseInfo from "./components/WarehouseInfo"
import { cloneDeep } from "lodash"

const props = defineProps({
  formData: Object,
})
const warehouseOptions = ref([])
const shippingMethods = ref([])
const visibleCusShippingMethods = ref(false)
const visibleCusShippingMethodsExclude = ref(false)
const visibleShippingMethods = ref(false)
const visibleWarehouseInfo = ref(false)

const initWarehouseOptions = async () => {
  const res = await getWarehouseOptions()
  warehouseOptions.value = res.data
}

const initShippingMethods = async () => {
  const res = await tmsOverallOptions({ params: ["map.channel"] })
  shippingMethods.value = res.data.mapChannel
}

const clearOriginalShippingMethod = (value, key) => {
  const _target = props.formData[key]
  if (!value) {
    _target.length = 0
  } else {
    const _findIndex = _target.findIndex((v) => v.id === value)
    _target.splice(_findIndex, 1)
  }
}

const handleShippingMethodDialog = () => {
  visibleCusShippingMethods.value = true
}
const handleShippingMethodExcludeDialog = (type) => {
  visibleCusShippingMethodsExclude.value = true
}
const handleDialogData = (dtd, key) => {
  const labelMatch = {
    customer_shipping_method: "description",
    customer_shipping_method_exclude: "description",
    original_shipping_method: "channel_name",
    original_shipping_warehouse: "warehouse_name",
  }
  // 转label的字段
  const matched = labelMatch[key]
  if ("customer_shipping_method,customer_shipping_method_exclude".includes(key)) {
    props.formData[key] = props.formData[key].concat(dtd.map((item) => ({ id: item.id, label: item[matched] })))
  } else {
    props.formData[key] = dtd.map((item) => ({ id: item.id, label: item[matched] }))
  }
}

onMounted(() => {
  initWarehouseOptions()
  initShippingMethods()
  getOpt()
})

import { getAloneEnum } from "@/utils/enumUtils"
const originOption = ref({})
const getOpt = async () => {
  let option = await getAloneEnum(["platform", "country"])
  for (const key in option) {
    originOption.value[key] = option[key]
  }
}
</script>

<style lang="scss"></style>
